<!--
 * @Author: 春天被折进纸里 3301231308@qq.com
 * @Date: 2024-03-08 15:14:54
 * @LastEditors: 春天被折进纸里 3301231308@qq.com
 * @LastEditTime: 2024-04-02 10:04:01
 * @FilePath: \visual-large-screen\src\components\LeftPanel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="panel-wrapper">
    <div class="city-wrapper">
      <el-select
        v-model="dataMsg.cityName"
        placeholder="请选择城市"
        size="small"
        @change="cityChange($event)"
      >
        <el-option
          v-for="item in dataMsg.cityData"
          :key="item.cityCode"
          :label="item.cityName"
          :value="item.cityCode"
        />
      </el-select>
    </div>
    <div class="panel-item">
      <div class="panel-item-title">实时配送动态</div>
      <div class="panel-item-wrapper delivery-dynamics">
        <vue3-seamless-scroll
          hover-stop="true"
          :list="deliveryDynamics"
          :hover="true"
          :step="0.3"
        >
          <div
            class="item-wrapper"
            v-for="item in deliveryDynamics"
            :key="item.id"
          >
            <div class="item-icon delivery"></div>
            <div class="item-info">
              <div class="item-info-content">{{ item.content }}</div>
              <div class="item-info-text time">{{ item.time }}</div>
            </div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
    <div class="panel-item">
      <div class="panel-item-title">实时车辆位置</div>
      <div class="panel-item-wrapper vehicle-location">
        <vue3-seamless-scroll
          v-if="deliveryDynamics.length"
          hover-stop="true"
          :list="deliveryDynamics"
          :hover="true"
          :step="0.3"
        >
          <div
            class="item-wrapper"
            v-for="item in vehicleLocation"
            :key="item.id"
          >
            <div class="item-icon vehicle"></div>
            <div class="item-info">
              <div class="item-info-content location">
                {{ item.location }}
              </div>
              <div class="item-info-text numberplate">
                车牌号：{{ item.numberplate }}
              </div>
            </div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { useCityStore, useUserStore } from "@/store/index";
import { getCityList } from "@/utils/createCityList";
import { getUserList } from "@/utils/createUserList";

// 配送动态
const deliveryDynamics = reactive([
  {
    id: 1,
    content: "增阿比到达宝安壹中心花半里店",
    time: "15:15:26",
  },
  {
    id: 2,
    content: "增阿比到达宝安壹中心花半里店",
    time: "15:15:26",
  },
  {
    id: 3,
    content: "增阿比到达宝安壹中心花半里店",
    time: "15:15:26",
  },
  {
    id: 4,
    content: "增阿比到达宝安壹中心花半里店",
    time: "15:15:26",
  },

  {
    id: 5,
    content: "增阿比到达宝安壹中心花半里店",
    time: "15:15:26",
  },
  {
    id: 6,
    content: "增阿比到达宝安壹中心花半里店",
    time: "15:15:26",
  },
  {
    id: 7,
    content: "增阿比到达宝安壹中心花半里店",
    time: "15:15:26",
  },
  {
    id: 8,
    content: "增阿比到达宝安壹中心花半里店",
    time: "15:15:26",
  },
  {
    id: 9,
    content: "增阿比到达宝安壹中心花半里店",
    time: "15:15:26",
  },
  {
    id: 10,
    content: "增阿比到达宝安壹中心花半里店",
    time: "15:15:26",
  },
]);
// 车辆位置
const vehicleLocation = reactive([
  {
    id: 1,
    location:
      "广东省深圳市福田区华强北路1015号新华强广场LED交易中心5楼H5B001-H5B009",
    numberplate: "湘S483UX",
  },
  {
    id: 2,
    location:
      "广东省深圳市福田区华强北路1015号新华强广场LED交易中心5楼H5B001-H5B009",
    numberplate: "湘S483UX",
  },
  {
    id: 3,
    location:
      "广东省深圳市福田区华强北路1015号新华强广场LED交易中心5楼H5B001-H5B009",
    numberplate: "湘S483UX",
  },

  {
    id: 4,
    location:
      "广东省深圳市福田区华强北路1015号新华强广场LED交易中心5楼H5B001-H5B009",
    numberplate: "湘S483UX",
  },
  {
    id: 5,
    location:
      "广东省深圳市福田区华强北路1015号新华强广场LED交易中心5楼H5B001-H5B009",
    numberplate: "湘S483UX",
  },

  {
    id: 6,
    location:
      "广东省深圳市福田区华强北路1015号新华强广场LED交易中心5楼H5B001-H5B009",
    numberplate: "湘S483UX",
  },
  {
    id: 7,
    location:
      "广东省深圳市福田区华强北路1015号新华强广场LED交易中心5楼H5B001-H5B009",
    numberplate: "湘S483UX",
  },

  {
    id: 8,
    location:
      "广东省深圳市福田区华强北路1015号新华强广场LED交易中心5楼H5B001-H5B009",
    numberplate: "湘S483UX",
  },
]);
const cityStore = useCityStore();
const userStore = useUserStore();
const dataMsg = reactive({
  cityName: "",
  cityData: [],
});

/***
 * 获取所有城市
 */
const findAllCity = async () => {
  let resp = await getCityList();
  dataMsg.cityData = await resp.data;
  dataMsg.cityName = await dataMsg.cityData[0].cityName;
  cityStore.cityCode = await dataMsg.cityData[0].cityCode;
  await findUserData(dataMsg.cityData[0]);
};

/***
 * 获取用户列表
 **/
const findUserData = async (data) => {
  userStore.userData = await null;
  data["userNum"] = await 15;
  let resp = await getUserList(data);
  userStore.userData = await resp.data;
};

onMounted(() => {
  findAllCity();
});

const cityChange = (value) => {
  dataMsg.cityData.forEach((item) => {
    if (item.cityCode == value) {
      dataMsg.cityName = item.cityName;
      cityStore.cityCode = item.cityCode;
      findUserData(item);
    }
  });
};
</script>

<style lang="scss" scoped>
.panel-wrapper {
  padding: 16px 20px;
  width: 320px;
  height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  background: linear-gradient(90deg, rgba(8, 14, 30, 0.4) 0%, #080e1e 100%);
  position: fixed;
  top: 80px;
  left: 0;
  z-index: 10;

  display: flex;
  flex-direction: column;
  gap: 24px;

  .city-wrapper {
    width: 280px;
    height: 40px;
    border-radius: 4px;
    background: linear-gradient(180deg, #323647 -4%, #222631 100%);
    box-sizing: border-box;
    border: 1px solid #18fefe;
    box-shadow: 0px 0px 4px 0px rgba(24, 254, 254, 0.5);
  }
  .panel-item {
    width: 280px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    .panel-item-title {
      padding-left: 40px;
      width: 100%;
      height: 50px;
      background: url("@/assets/images/rightPanel/title-bg.png");
      background-repeat: round;

      font-size: 24px;
      font-weight: 500;
      line-height: 50px;
      color: rgba(255, 255, 255, 0.87);
      text-shadow: 0px 2px 24px rgba(27, 126, 242, 0.91);
    }

    .panel-item-wrapper {
      width: 100%;
      height: 344px;
      overflow: auto;
      /* 自动布局 */
      display: flex;
      flex-direction: column;
      &.vehicle-location {
        height: 280px;
      }
      .item-wrapper {
        display: flex;
        flex-direction: row;
        gap: 4px;
        cursor: pointer;

        .item-icon.delivery {
          width: 36px;
          height: 24px;
          background: url("@/assets/images/vehicleInfo/vehicle-icon.png");
          background-repeat: round;
        }
        .item-icon.vehicle {
          margin-right: 8px;
          width: 28px;
          height: 32px;
          background: url("@/assets/images/vehicleInfo/location-icon.png");
          background-repeat: round;
        }
        .item-info {
          flex: 1;
          .item-info-content {
            width: 100%;
            font-size: 16px;
            line-height: 24px;
            color: #29f1fa;
          }
          .item-info-text {
            margin-top: 4px;
            width: 100%;
            font-size: 14px;
            line-height: 20px;
            color: #fff;
          }
        }
      }
    }
  }
}
// el下拉框的样式
::v-deep(.el-select) {
  width: 280px !important;
  height: 40px !important;
  .el-select__wrapper {
    height: 40px !important;
    box-sizing: border-box;
    background-color: transparent;
    box-shadow: none;
    position: relative;
    &::before {
      display: block;
      content: "";
      width: 12px;
      height: 12px;
      position: absolute;
      top: 50%;
      left: 10px;
      background: url("@/assets/images/leftPanel/city-select-icon.png");
      background-repeat: round;
      transform: translate(0, -50%);
    }
    .el-select__selected-item {
      margin-left: 24px;
      width: calc(100% - 24px);
      font-size: 14px;
      color: #ffffff;
    }
  }

  .el-select__suffix {
    width: 1em;
    height: 1em;
    .el-icon {
      margin-right: 8px;
      position: relative;
      &::before {
        display: block;
        content: "";
        width: 0;
        height: 0;
        border-top: 0.4em solid #18fefe;
        border-left: 0.4em solid transparent;
        border-right: 0.4em solid transparent;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      svg {
        display: none;
      }
    }
  }
}
</style>
